<template>
    <transition name="confirm-fade">
        <div class="confirm" v-show="showFlag" @click.stop>
            <div class="confirm-wrapper">
                <div class="confirm-content">
                    <p class="text">{{text}}</p>
                    <div class="operate">
                        <div @click="cancel" class="operate-btn left">{{cancelBtnText}}</div>
                        <div @click="confirm" class="operate-btn">{{confirmBtnText}}</div>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      text: {
        type: String,
        default: ''
      },
      confirmBtnText: {
        type: String,
        default: '确定'
      },
      cancelBtnText: {
        type: String,
        default: '取消'
      }
    },
    data() {
      return {
        showFlag: false
      }
    },
    methods: {
      show() {
        this.showFlag = true
      },
      hide() {
        this.showFlag = false
      },
      cancel() {
        this.hide()
        this.$emit('cancel')
      },
      confirm() {
        this.hide()
        this.$emit('confirm')
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "~common/stylus/variable"

    .confirm
        position: fixed
        left: 0
        right: 0
        top: 0
        bottom: 0
        z-index: 998
        background-color: $color-background-d
        &.confirm-fade-enter-active
            animation: confirm-fadein 0.3s
            .confirm-content
                animation: confirm-zoom 0.3s
        .confirm-wrapper
            position: absolute
            top: 50%
            left: 50%
            transform: translate(-50%, -50%)
            z-index: 999
            .confirm-content
                width: 270px
                border-radius: 13px
                background: $color-highlight-background
                .text
                    padding: 19px 15px
                    line-height: 22px
                    text-align: center
                    font-size: $font-size-large
                    color: $color-text-l
                .operate
                    display: flex
                    align-items: center
                    text-align: center
                    font-size: $font-size-large
                    .operate-btn
                        flex: 1
                        line-height: 22px
                        padding: 10px 0
                        border-top: 1px solid $color-background-d
                        color: $color-text-d
                        &.left
                            border-right: 1px solid $color-background-d

    @keyframes confirm-fadein
        0%
            opacity: 0
        100%
            opacity: 1

    @keyframes confirm-zoom
        0%
            transform: scale(0)
        50%
            transform: scale(1.1)
        100%
            transform: scale(1)
</style>